<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style-user.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <table id="order" lay-filter="tableFilter"></table>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="item">订单详情</a>
    </script>

    <table id="itemTable"></table>

    <script>
        layui.use(['table','layer'],function () {
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem:'#order',
                url:'order/selectOrders',
                cols:[[
                    {field:'orderId',title:'订单ID',sort:true},
                    {field:'orderNo',title:'订单编号',sort:true},
                    {field:'total',title:'订单金额',sort:true},
                    {field:'orderStatus',title:'订单状态',templet:function (d) {
                            if(d.orderStatus==1){
                                return '已支付'
                            }else {
                                return '未付款'
                            }
                        }},
                    {field:'address.name',title:'收件人',sort:true},
                    {field:'address.local',title:'收货地址',sort:true},
                    {field:'orderDate',title:'创建日期',sort:true},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //给修改操作绑定触发事件   tool行工具条被点击
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='item'){

                    table.render({
                        elem:'#itemTable',
                        url:'item/selectItem',
                        cols:[[
                            {field:'order.orderNo',title:'订单号',sort:true},
                            {field:'order.total',title:'订单金额',sort:true},
                            {title:'订单状态',templet:function (d) {
                                    if(d.order.orderStatus==1){
                                        return '已支付'
                                    }else {
                                        return '未付款'
                                    }
                                }},
                            {field:'order.total',title:'订单金额',sort:true},
                        ]]
                    })
                }
            })
        })
    </script>
</body>
</html>